<template>
  <view class="membership_card">

    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <z-nav-bar id="nav" bgColor="#ffffff" title="搜索店铺"></z-nav-bar>
        <view class="search-area">
          <up-search placeholder="请输入店铺名称" v-model="storeName" :showAction="false"></up-search>
        </view>
      </template>
      <public-loading></public-loading>
      <!-- 会员卡 -->

      <view class="shop-box" style="margin-top: 30rpx;">
        <view class="shop-item" @click="goCooperation('/pagesShop/shop_details?storeId='+item.id+'&favorited='+item.favorited)"  v-for="(item,index) in dataList" :key="index">
          <navigator class="flex" >
            <image class="shopImg" :src="item.images" mode=""></image>
            <view class="refer">
              <view class="refer-item1 flex-center-between">
                <text class="text-ellipsis ellip1">{{item.storeShortName}}</text>
                <image v-if="item.favorited==1" src="http://www.xvopen.com/xiaoV/img1/heart-full.png" mode=""></image>
                <image  v-else src="http://www.xvopen.com/xiaoV/img1/heart.png" mode=""></image>
              </view>
              <view class="refer-item2 flex-center-between">
                <text class="text-ellipsis text-ellipsis2 ellip2"  style="font-size: 24rpx">店铺简介：{{item.description}}</text>
                <text>{{item.collectStore}}人收藏过</text>
              </view>
              <view class="refer-item3 flex-center-between">
                <view>
                  <star :starRate="item.rating"></star>
                  <view class="distance flex-a-center">
                    <image class="add" src="http://www.xvopen.com/xiaoV/img1/add.png" mode=""></image>
                    {{  item.distance.toFixed(3)}}km

                  </view>
                </view>
                <view class="btn">
                  <main-button :fontSize="'24rpx'" :height="'48rpx'" :width="'144rpx'" @click="goShopCooperation(item.id, item.storeId)">一键下单</main-button>
                </view>
              </view>
            </view>
          </navigator>
        </view>
      </view>
    </z-paging>

  </view>
</template>

<script setup>
import { navigateTo } from '@/utils/navigator'
import { qryIndexList } from '@/api/home'
import { storeDetailsId } from '@/api/pagesShop/index'
import { ref, reactive, watch, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useCustomStores } from '@/utils/hook'
import { commonStore } from '@/stores/common'
const { ShopStore } = useCustomStores()
const { proxy } = getCurrentInstance()
const paging = ref(null)
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([])
const CommonStore = commonStore()
const baseInfo = reactive({
  storeId: '',
  storeName: '',
  disabled: false,
  searchPanelVisible: false
})
const storeName = ref('')
// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
  qryIndexList({
    pageNum: pageNo,
    pageSize: pageSize,
    storeName: storeName.value,
    latitude: CommonStore.cityInfo.latitude || null,
    longitude: CommonStore.cityInfo.longitude || null,
  }).then(res => {
    paging.value.complete(res)
  })
}
watch(storeName, (newValue, oldValue) => {
  paging.value.reload()
})
const goCooperation = (url, flag) => {
  proxy.$checkLoginAndExecute(() => {
    if (flag) {
      uni.navigateTo({
        url
      })
      return
    }
    uni.navigateTo({
      url
    })
    // 在这里执行你需要的操作
  })
}
const handleConfirmItem = () => {
  uni.navigateTo({
    url: '/pagesMy/user/membership_package'
  })
}
const goShopCooperation = (id, ids) => {
  storeDetailsId(id).then(res => {
    ShopStore.setShopInfo({
      ...res
    })
    uni.navigateTo({
      url: '/pages/cleaningOrder/index?storeId=' + ids
    })
  })
}
onLoad((options) => {
  if (options.keyword) {
    storeName.value = options.keyword
  }
})
</script>

<style lang="scss">
@import "./style/common.scss";
page {
  background-color: #fff;
}
.membership_card{
  box-sizing: border-box;
  width: 100%;
  padding: 0 32rpx;
}
.card-pot {
  &.blue {
    background-color: #D8E3FF;
  }
  &.orange {
    background-color: #FCDEAA;
  }
}
.theme {
  max-width: 10em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-area {

  box-sizing: border-box;
  width: 100%;
  padding: 0 32rpx;
  //position: relative;
  .search-shop-pot {
    margin-top: 100rpx;
    display: none;
    width: calc(100% - 64rpx);
    min-height: 283rpx;
    max-height: 500rpx;
    position: absolute;
    top: 80rpx;
    left: 32rpx;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 4rpx 24rpx;
    box-shadow: 0 6rpx 6rpx 1rpx rgba(171, 171, 171, 0.16);
    z-index: 5;
    &.active {
      display: block;
    }
    .search-item-pot{
      min-height: 275rpx;
      max-height: 402rpx;
    }
    .shop-item{
      padding: 20rpx 0;
      .title{
        font-size: 32rpx;
        font-weight: bold;
        color: #000;
      }
      .add{
        font-size: 24rpx;
        font-weight: normal;
        color: #636363;
        .small-img {
          width: 32rpx;
          height: 32rpx;
          margin-right: 12rpx;
        }
      }
      .cont{
        font-weight: bold;
        margin-top: 12rpx;
      }
      .btn{
        margin-top: 12rpx;
        width: 120rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        background-color: #0080FF;
        border-radius: 8rpx;
        color: #fff;
        font-size: 24rpx;
        font-weight: normal;
      }
    }
  }
}
</style>
